<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="my.css">
</head>
    <style>
         div {
            margin: 100px auto;
            font-size: 0.5rem;
            height: 1rem;
            background-color: #999;
        }
        @media screen and  (min-width:320px) {
            html {
                font-size: 50px;
        }
        }
        @media screen and  (min-width:640px) {
            html {
                font-size: 100px;
        }
        }
         
        @media screen and (min-width:300px) {
            body {
                background-color: rgb(204, 84, 84);
              
           }
        }
        @media screen and (min-width:600px) {
            body {
                background-color: rgb(61, 207, 105);
             
        }
        }
        @media screen and (min-width:900px) {
            body {
                background-color: rgb(84, 126, 204);
               
           }
        }   
       
    </style> 

<body>
    <div>
        g购物车
    </div> 
</body>
</html>